<template>
  <div class="wrap">
    <div class="wpn">
      <div class="form-data pos">
        <form>
          <p class="p-input pos" id="pwd">
            <!-- <input type="password" style="display: none" /> -->
            <input
              v-model="old_password"
              placeholder="输入旧密码"
              type="password"
              id="passport"
            />
            <span class="tel-warn pwd-err hide">
              <q-icon name="error" />
            </span>
          </p>
          <p class="p-input pos" id="pwd">
            <!-- <input type="password" style="display: none" /> -->
            <input
              v-model="password"
              placeholder="输入新密码"
              type="password"
              id="passport"
            />
            <span class="tel-warn pwd-err hide">
              <q-icon name="error" />
            </span>
          </p>
          <p class="p-input pos" id="confirmpwd">
            <!-- <input type="password" style="position: absolute; top: -998px" /> -->
            <input
              v-model="confirm_password"
              placeholder="确认新密码"
              type="password"
              id="passport2"
            />
            <span class="tel-warn confirmpwd-err hide">
              <em></em>
              <i class="icon-warn" style="margin-left: 5px"></i>
            </span>
          </p>
          <!-- <p class="p-input pos" id="sendcode">
            <input
              type="number"
              placeholder="输入验证码"
              id="veri-code"
              v-model="code"
            />
            <a class="send" @click.prevent="sendCode">发送验证码</a>
            <span class="time hide"><em>120</em>s</span>
            <span class="error hide">
              <em></em>
              <i class="icon-warn" style="margin-left: 5px"></i>
            </span>
          </p> -->
        </form>
        <button class="lang-btn" @click="reg">修改密码</button>
        <p class="right">Powered by © 2021</p>
      </div>
    </div>
    <q-dialog v-model="alert">
      <q-card>
        <q-card-section>
          <div class="text-h6">提示</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          成功修改密码,请登录!
        </q-card-section>

        <q-card-actions align="right">
          <q-btn
            flat
            label="确认"
            color="primary"
            v-close-popup
            @click="goback"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alert: false,
      phone: "18683684026",
      code: "",
      old_password: "",
      password: "",
      confirm_password: "",
      errMsg: "",
    };
  },
  methods: {
    async reg() {
      if (!/^1[345678]\d{9}$/.test(this.phone)) {
        this.errMsg = "手机号错误!";
        return;
      }
      if (!/^\d{6}$/.test(this.code)) {
        this.errMsg = "验证码错误";
        return;
      }
      if (
        !/^.{6,40}$/.test(this.password) ||
        this.confirm_password !== this.password
      ) {
        this.errMsg = "密码错误";
        return;
      }
      try {
        // let pwd = this.$utils.encryption(this.password);
        let pwd = this.password;
        let res = await this.$business.changePassword(this.old_password, pwd);
        console.log(res.data);
        if (res.data.status === true) {
          // todo:发送新用户注册消息
          // this.$store.state.db.addRecord(
          //   null,
          //   "abc.com",
          //   "欢迎来到周边生活!",
          //   "rec",
          //   new Date().toLocaleString("chinese", { hour12: false }),
          //   "http://192.168.1.56:8090/img?bucket=avatar&filename=logo.png",
          //   (r) => console.log(r)
          // );
          // this.alert = true;
          this.$router.push({ path: "/user/login" });
        } else {
          this.errMsg = res.data.message;
        }
      } catch (err) {
        console.log(err);
      }
    },
    async sendCode() {
      try {
        let code = await this.$account.getValidateCode({ phone: this.phone });
        this.code = code.data;
      } catch (err) {
        console.log(err);
      }
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
@import "~@/assets/css/user.css";
input::placeholder {
  font-size: 12px;
  font-family: Arial;
}
</style>